<!DOCTYPE html>
<html>
	{include file="public1/_header" /}
	<script type="text/javascript" src="__STATIC__/admin/js/vue.min.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript" src="__STATIC__/admin/js/dom-to-image.min.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/js/vue.drag-and-drop.js"></script>
	<style type="text/css">
		li {
			list-style: none;
		}

		*,
		ul,
		li,
		p,
		div {
			user-select: none;
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			font-size: 12px;
		}

		.layout-content-box {
			background: #fff;
			padding: 4px;
		}

		.layout {
			display: flex;
			min-width: 900px;
			overflow: auto;
		}

		.content-box {
			position: relative;
			overflow: hidden;
		}

		.box-list {
			position: relative;
			box-sizing: content-box;
			background: #00b6ff;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			width: 935px;
		}

		.list-ul {
			float: left;
			padding: 6px;
		}

		.box-list-border {
			height: 100%;
			border-radius: 10px;
			font-size: 26px;
			color: #ddd;
			text-align: center;
			background: #fff;
		}

		.box-list-border.on {
			background: yellow;
		}

		.box-list-border.active {
			/* background: red; */
		}

		.content-img {
			position: absolute;
			left: 0px;
			top: 0px;
		}

		.ant-btn {
			padding: 0 15px;
		}

		.img-box {
			position: absolute;
			top: 0px;
			left: 0px;

		}

		.img-border {
			padding: 6px;
			box-sizing: border-box;
		}

		.img-box img {
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}

		.img-box:hover .close {
			display: inline-block;
		}

		.close {
			display: none;
			position: absolute;
			top: 0px;
			right: 0px;
			width: 40px;
			height: 40px;
			font-style: normal;
			font-size: 20px;
			color: #fff;
			background: rgba(22, 22, 22, 0.5);
			border-radius: 50%;
			border: 2px solid rgba(222, 222, 222, 0.8);
			text-align: center;
			line-height: 30px;
			box-sizing: border-box;
			cursor: pointer;
			z-index: 1000;
		}

		.components {
			width: 255px;
			height: 600px;
			overflow: hidden;
			background: #f5f5f5;
			margin-left: 2px;
		}

		.component-title {
			height: 45px;
			line-height: 45px;
			text-indent: 20px;
		}

		.component-type {
			background: #ddd;
		}

		.component-type ul {
			display: flex;
			padding-left: 10px;
			height: 35px;
			line-height: 35px;

		}

		.component-type ul li {
			padding: 0px 8px;
			cursor: pointer;
			position: relative;
		}

		.component-lists {
			overflow: auto;
			height: 510px;
			background: #fffff;
		}

		.component-lists ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		.component-lists ul li {
			height: 180px;
			background: #fff;
			margin: 10px;
			width: 260px;
			cursor: pointer;
		}

		.component-content {
			box-sizing: border-box;
			padding: 10px;
			display: flex;
			align-items: center;
			height: 180px;
			border: 1px solid #fff;
			border-radius: 8px;
		}

		.component-content:hover {
			border: 1px solid #0099E8;
		}

		.component-img {}

		.component-img img {
			max-height: 170px;
			max-width: 100px;
		}

		.component-desc {
			display: flex;
			height: 180px;
			flex-direction: column;
			padding: 0 10px;
			justify-content: center;
		}

		.showName {
			font-weight: 700;
		}

		.brief {
			font-size: 12px;
		}

		.on {
			color: #fff;
			background: #1890ff;
		}

		[v-cloak] {
			display: none;
		}

		.layui-layout-admin {
			position: fixed;
			left: 0px;
			right: 0;
			bottom: 0;
			height: 60px;
			background-color: #fff;
			text-align: center;
			z-index: 1000;
			border-top: 1px solid #ddd;
		}
	</style>
	<body style="background: #fff;">
		<div id="app" v-cloak>

			<div class="layout-content-box">
				<div class="layout" ref="layout">
					<div class="content-box" ref="contentBox">
						<div class="box-list" id="box" ref="maxbox">
							<div ref="box" class="list-ul" :style="{'width':boxwidth+'px','height':boxheight+'px','lineHeight':boxheight+'px'}"
							 v-for="(item,index) in arr" :key="index" @mouseleave="leave(index)">
								<div :class="{'active':item[2] == false,'on':item[3]}" class="box-list-border">{{index+1}}</div>
							</div>

						</div>
						<div class="content-img" ref="showImg" :style="{'width':boxmaxwidth+'px','height':boxmaxheight+'px'}">
							<div v-for="(item,index) in imgBox" class="img-box" :key="index">
								<div class="img-border" v-drag-and-drop @click="getType(item)" @drag="handleDrag($event,item,true)" @dragend="handleDragEnd($event,item,index,true)"
								 :style="{'position':'absolute', 'width':boxwidth*item.width+'px','height':boxheight*item.height+'px','top':item.top+'px','left':item.left+'px'}">
									<img :src="item.thumb" draggable="false">
									<i class="close" @click="closeImg(item)">x</i>
								</div>
							</div>
						</div>
						<form class="layui-form" action="">
							<div class="layui-card">
								<div class="layui-card-body" style="overflow: hidden;">

									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label" style="width: 120px;">模板标题 <span style='color:red'>*</span></label>
											<div class="layui-input-inline">
												<input type="text" name="title" value="{$result['title']|default=""}" required lay-verify="required"
												 placeholder="模板标题" autocomplete="off" class="layui-input">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label" style="width: 120px;">模板描述 <span style='color:red'>*</span></label>
											<div class="layui-input-inline">
												<input type="text" name="describe" value="{$result['describe']|default=""}" required lay-verify="required"
												 placeholder="模板标题" autocomplete="off" class="layui-input">
											</div>
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label" style="width: 120px;">排序 <span style='color:red'>*</span></label>
											<div class="layui-input-inline">
												<input type="number" value="100" name="sort" value="{$result['sort']|default=" 100"}" required lay-verify="required"
												 placeholder="排序" autocomplete="off" class="layui-input">
											</div>
										</div>
									</div>


									<div style="text-align: center;" class="layui-layout-admin">
										<input type="hidden" name="id" value="{$Request.get.id}">
										<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
										<button type="button" id="close" class="layui-btn layui-btn-primary">放弃</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="components">
						<div class="component-title">组件库</div>
						<div class="component-type">
							<ul>
								<li @click="componentShow(0)" :class="typeIndex == 0 ? 'on':''">全部</li>
								<li @click="componentShow(4)" :class="typeIndex == 4 ? 'on':''">1*3</li>
								<li @click="componentShow(3)" :class="typeIndex == 3 ? 'on':''">1*2</li>
								<li @click="componentShow(2)" :class="typeIndex == 2 ? 'on':''">2*1</li>
								<li @click="componentShow(1)" :class="typeIndex == 1 ? 'on':''">1*1</li>
								<li @click="componentShow(5)" :class="typeIndex == 5 ? 'on':''">2*2</li>
							</ul>
						</div>
						<div class="component-lists">
							<ul>
								<li v-show="item.show" v-drag-and-drop @click="getType(item)" @drag="handleDrag($event,item,false)" @dragend="handleDragEnd($event,item,index,false)"
								 v-for="(item,index) in componentLists" :key="index">
									<div class="component-content">
										<div class="component-img"><img draggable="false" :src="item.thumb" alt=""></div>
										<div class="component-desc">
											<span class="showName">{{item.showName}}</span>
											<span>{{item.width}}*{{item.height}}</span>
											<span class="brief">{{item.brief}}</span>
										</div>
									</div>

								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			var app = new Vue({
				el: '#app',
				data: {
					offsetLeft: 0,
					maxWidth: 6,
					maxHeight: 4,
					type: 0,
					typeIndex: 0,
					boxwidth: 0,
					boxheight: 0,
					arr: [
						[0, 0, false, false],
						[1, 0, false, false],
						[2, 0, false, false],
						[3, 0, false, false],
						[4, 0, false, false],
						[5, 0, false, false],
						[0, 1, false, false],
						[1, 1, false, false],
						[2, 1, false, false],
						[3, 1, false, false],
						[4, 1, false, false],
						[5, 1, false, false],
						[0, 2, false, false],
						[1, 2, false, false],
						[2, 2, false, false],
						[3, 2, false, false],
						[4, 2, false, false],
						[5, 2, false, false],
						[0, 3, false, false],
						[1, 3, false, false],
						[2, 3, false, false],
						[3, 3, false, false],
						[4, 3, false, false],
						[5, 3, false, false]
					],
					imgBox: {$result['template_code']},
					componentLists: {$components},
					boxmaxwidth: 0,
					boxmaxheight: 0,
					originX: 0,
					originY: 0,
					hideComponent: {$hideComponent},
					isdown: false,
					positionX: 0,
					positionY: 0,
					intersection: [] //当前组件碰撞后设置不可用key的数组
				},
				mounted() {
					this.boxmaxwidth = this.$refs.maxbox.offsetWidth;
					this.boxmaxheight = this.boxmaxwidth / 2.213;
					this.boxwidth = this.boxmaxwidth / 6;
					this.boxheight = this.boxmaxwidth / 2.213 / 4;
					this.offsetLeft = this.$refs.layout.offsetLeft;
					this.offsetTop = this.$refs.layout.offsetTop;
				},
				methods: {
					componentShow(type) {
						switch (type) {
							case 0:
								this.typeIndex = 0;
								this.componentLists.forEach((v, k) => {
									if (!this.in_array(v.id, this.hideComponent)) {
										this.$set(this.componentLists[k], 'show', true);
									} else {
										this.$set(this.componentLists[k], 'show', false);
									}
								})
								break;
							case 1:
								this.typeIndex = 1;
								this.componentLists.forEach((v, k) => {
									if (v.type == 1) {
										if (!this.in_array(v.id, this.hideComponent)) {
											this.$set(this.componentLists[k], 'show', true);
										}

									} else {
										this.$set(this.componentLists[k], 'show', false);
									}
								})
								break;
							case 2:
								this.typeIndex = 2;
								this.componentLists.forEach((v, k) => {
									if (v.type == 2) {
										if (!this.in_array(v.id, this.hideComponent)) {
											this.$set(this.componentLists[k], 'show', true);
										}
									} else {
										this.$set(this.componentLists[k], 'show', false);
									}
								})
								break;
							case 3:
								this.typeIndex = 3;
								this.componentLists.forEach((v, k) => {
									if (v.type == 3) {
										if (!this.in_array(v.id, this.hideComponent)) {
											this.$set(this.componentLists[k], 'show', true);
										}
									} else {
										this.$set(this.componentLists[k], 'show', false);
									}
								})
								break;
							case 4:
								this.typeIndex = 4;
								this.componentLists.forEach((v, k) => {
									if (v.type == 4) {
										if (!this.in_array(v.id, this.hideComponent)) {
											this.$set(this.componentLists[k], 'show', true);
										}
									} else {
										this.$set(this.componentLists[k], 'show', false);
									}
								})
								break;
							case 5:
								this.typeIndex = 5;
								this.componentLists.forEach((v, k) => {
									if (v.type == 5) {
										if (!this.in_array(v.id, this.hideComponent)) {
											this.$set(this.componentLists[k], 'show', true);
										}
									} else {
										this.$set(this.componentLists[k], 'show', false);
									}
								})
								break;
						}
					},
					in_array(search, array) {
						for (var i in array) {
							if (array[i] == search) {
								return true;
							}
						}
						return false;
					},
					getIndex(item, arr) {
						for (var i = 0; i < arr.length; i++) {
							if (arr[i]['id'] == item.id) {
								return i;
							}
						}
						return 0
					},
					getIndexid(id, arr) {
						for (var i = 0; i < arr.length; i++) {
							if (arr[i] == id) {
								return i;
							}
						}
						return 0
					},
					closeImg(item) {
						var key = this.getIndex(item, this.imgBox);
						item.place.forEach((vv, kk) => {
							this.$set(this.arr[vv], 2, true);
						})
						this.imgBox.splice(key, 1);
						var k = this.getIndex(item, this.componentLists);
						var nkey = this.getIndexid(item.id, this.hideComponent);
						this.hideComponent.splice(nkey, 1);
						if (item.type == this.typeIndex) {
							this.$set(this.componentLists[k], 'show', true);
						} else if (this.typeIndex == 0) {
							this.$set(this.componentLists[k], 'show', true);
						}
					},
					getComponent(index) {
						this.type = this.componentLists[index].type;
					},
					collision(originX, originY) {
						switch (this.type) {
							case 1:
								return this.module1(originX, originY)
								break;
							case 2:
								return this.module2(originX, originY)
								break;
							case 3:
								return this.module3(originX, originY)
								break;
							case 4:
								return this.module4(originX, originY)
								break;
							case 5:
								return this.module5(originX, originY)
								break;
						}
					},
					leave() {
						for (var i = 0; i <= this.arr.length - 1; i++) {
							this.$set(this.arr[i], 3, false);
						}
					},
					handleDragEnd(e, curitem, index, coyp) {

						if (this.positionX <= this.boxmaxwidth && this.positionY <= this.boxmaxheight && this.positionX >= 0 && this.positionY >=
							0) {
							if (this.originX >= this.maxWidth || this.originY >= this.maxHeight) {
								return false
							}
							this.arr.forEach((item, index) => {
								if (item[2]) {
									this.$set(this.arr[index], 3, false);
								}
							})
							if (this.isdown) {
								let dataX = this.intersection;
								dataX.push(this.valueKey(this.originX, this.originY));
								let minKey = Math.min.apply(Math, dataX);
								var origin = this.arr[minKey];
								var left = this.boxwidth * origin[0];
								var top = this.boxheight * origin[1]
								var place = [];
								var nplace = this.distinct(this.intersection);
								nplace.forEach((item, index) => {
									place.push(item);
									this.$set(this.arr[item], 2, false);
								})


								this.imgBox.push({
									"showName": curitem.showName,
									"width": curitem.width,
									"height": curitem.height,
									"thumb": curitem.thumb,
									"id": curitem.id,
									"brief": curitem.brief,
									"type": curitem.type,
									"top": top,
									"left": left,
									"place": place,
									"show": curitem.show
								})
								this.$set(this.componentLists[index], 'show', false);
								this.hideComponent.push(this.componentLists[index].id)
								if (coyp) {
									var key = this.getIndex(this.prevItem, this.imgBox);
									this.prevItem.place.forEach((vv, kk) => {
										this.$set(this.arr[vv], 2, true);
									})
									this.imgBox.splice(key, 1);
								}
							}

						}
						this.arr.forEach((item, index) => {

							if (item[2]) {
								this.$set(this.arr[index], 3, false);
							}

						})
					},
					getType(item) {
						this.type = item.type
					},
					handleDragstart(e, item) {
						this.type = item.type
					},
					handleDrag(e, item, copy) {
						if (copy) {
							this.prevItem = item;
							this.prevItem.place.forEach((vv, kk) => {
								this.$set(this.arr[vv], 2, true);
							})

						}
						var boxmaxwidthoffsetLeft = this.$refs.maxbox.getBoundingClientRect().left;
						var boxmaxwidthoffsetTop = this.$refs.maxbox.getBoundingClientRect().top;
						this.type = item.type
						if (e.x > 0) {
							this.positionX = e.x - boxmaxwidthoffsetLeft;
							this.positionY = e.y - boxmaxwidthoffsetTop;
							this.originX = Math.floor(this.positionX / this.boxwidth);
							this.originY = Math.floor(this.positionY / this.boxheight);
							if (this.positionX <= this.boxmaxwidth && this.positionY <= this.boxmaxheight && this.positionX >= 0 && this
								.positionY >=
								0) {
								if (this.originX >= this.maxWidth || this.originY >= this.maxHeight) {
									return false
								}

								this.arr.forEach((item, index) => {

									if (item[2]) {
										this.$set(this.arr[index], 3, false);
									}
								})
								this.isdown = this.collision(this.originX, this.originY)
							}
							window.event ? window.event.cancelBubble = true : e.stopPropagation();
							return false;
						}
					},
					//1*1
					module1(x, y) {
						//判断1*1进行碰撞是否可用
						this.intersection = [];
						var key = this.valueKey(x, y);
						if (!this.isAble(key)) {
							//如果不可用返回 false
							return false
						}
						this.$set(this.arr[key], 3, true);
						this.intersection.push(key)
						return true
					},
					//2*1
					module2(x, y) {
						this.intersection = []
						var key = this.valueKey(x, y)
						if (!this.isAble(key)) {
							return false
						}
						if ((this.maxWidth - x) >= 2) {

							var right = this.isAble(key + 1);
							if (right) {
								this.$set(this.arr[key], 3, true);
								this.$set(this.arr[key + 1], 3, true);
								this.intersection.push(key);
								this.intersection.push(key + 1);
								return true
							} else {
								if (x % 4 == 0) {
									return false
								}
								var left = this.isAble(key - 1);
								if (left) {
									this.$set(this.arr[key], 3, true);
									this.$set(this.arr[key - 1], 3, true);
									this.intersection.push(key);
									this.intersection.push(key - 1);
									return true
								}
							}
						} else {
							var left = this.isAble(key - 1);
							if (left) {
								this.$set(this.arr[key], 3, true);
								this.$set(this.arr[key - 1], 3, true);
								this.intersection.push(key);
								this.intersection.push(key - 1);
								return true
							} else {
								return false
							}
						}
						return false
					},
					//1*2
					module3(x, y) {
						this.intersection = [];
						var key = this.valueKey(x, y)
						if (!this.isAble(key)) {
							return false
						}
						if ((this.maxHeight - y) >= 2) {
							var bottom = this.isAble(key + this.maxWidth);
							if (bottom) {
								this.$set(this.arr[key], 3, true);
								this.$set(this.arr[key + this.maxWidth], 3, true);
								this.intersection.push(key);
								this.intersection.push(key + this.maxWidth);
								return true
							} else {
								if (y == 0) {
									return false
								}
								var top = this.isAble(key - this.maxWidth);
								if (top) {
									this.$set(this.arr[key], 3, true);
									this.$set(this.arr[key - this.maxWidth], 3, true);
									this.intersection.push(key);
									this.intersection.push(key - this.maxWidth);
									return true
								}
							}
						} else {
							var top = this.isAble(key - this.maxWidth);
							if (top) {
								this.$set(this.arr[key], 3, true);
								this.$set(this.arr[key - this.maxWidth], 3, true);
								this.intersection.push(key);
								this.intersection.push(key - this.maxWidth);
								return true
							}
						}
						return false
					},
					//1*3
					module4(x, y) {
						this.intersection = [];
						var key = this.valueKey(x, y)
						if (!this.isAble(key)) {
							return false
						}

						if ((this.maxHeight - y) >= 3) {
							var bottom = this.isAble(key + this.maxWidth);
							var bottomBottom = this.isAble(key + this.maxWidth * 2);
							if (bottom && bottomBottom) {
								this.$set(this.arr[key], 3, true);
								this.$set(this.arr[key + this.maxWidth], 3, true);
								this.$set(this.arr[key + this.maxWidth * 2], 3, true);
								this.intersection.push(key);
								this.intersection.push(key + this.maxWidth);
								this.intersection.push(key + this.maxWidth * 2);
								return true
							} else {
								return false
							}
						} else if ((this.maxHeight - y) == 2) {
							var bottom = this.isAble(key + this.maxWidth);
							var top = this.isAble(key - this.maxWidth);
							if (bottom && top) {
								this.$set(this.arr[key], 3, true);
								this.$set(this.arr[key + this.maxWidth], 3, true);
								this.$set(this.arr[key - this.maxWidth], 3, true);
								this.intersection.push(key);
								this.intersection.push(key + this.maxWidth);
								this.intersection.push(key - this.maxWidth);
								return true
							} else {
								return false
							}

						} else if ((this.maxHeight - y) == 1) {
							var top = this.isAble(key - this.maxWidth);
							var topTop = this.isAble(key - this.maxWidth * 2);
							if (top && topTop) {
								this.$set(this.arr[key], 3, true);
								this.$set(this.arr[key - this.maxWidth], 3, true);
								this.$set(this.arr[key - this.maxWidth * 2], 3, true);
								this.intersection.push(key);
								this.intersection.push(key - this.maxWidth);
								this.intersection.push(key - this.maxWidth * 2);
								return true
							} else {
								return false
							}
							return true
						} else {
							return false
						}
					},
					position(quadrant, key) {
						switch (quadrant) {
							case 1:
								var left = this.isAble(key - 1);
								var top = this.isAble(key - this.maxWidth);
								var leftTop = this.isAble(key - this.maxWidth - 1);
								if (left && top && leftTop) {
									this.$set(this.arr[key - 1], 3, true);
									this.$set(this.arr[key - this.maxWidth], 3, true);
									this.$set(this.arr[key - this.maxWidth - 1], 3, true);
									this.$set(this.arr[key], 3, true);
									this.intersection.push(key);
									this.intersection.push(key - 1);
									this.intersection.push(key - this.maxWidth);
									this.intersection.push(key - this.maxWidth - 1);
									return true;
								} else {
									return false;
								}
								break;
							case 2:
								var right = this.isAble(key + 1);
								var top = this.isAble(key - this.maxWidth);
								var rightTop = this.isAble(key - this.maxWidth + 1);
								if (right && top && rightTop) {
									this.$set(this.arr[key + 1], 3, true);
									this.$set(this.arr[key - this.maxWidth], 3, true);
									this.$set(this.arr[key - this.maxWidth + 1], 3, true);
									this.$set(this.arr[key], 3, true);
									this.intersection.push(key);
									this.intersection.push(key + 1);
									this.intersection.push(key - this.maxWidth);
									this.intersection.push(key - this.maxWidth + 1);
									return true;
								} else {
									return false;
								}
								break;
							case 3:
								//左下
								var left = this.isAble(key - 1);
								var bottom = this.isAble(key + this.maxWidth);
								var leftBottom = this.isAble(key + this.maxWidth - 1);
								if (left && bottom && leftBottom) {
									this.$set(this.arr[key - 1], 3, true);
									this.$set(this.arr[key + this.maxWidth], 3, true);
									this.$set(this.arr[key + this.maxWidth - 1], 3, true);
									this.$set(this.arr[key], 3, true);
									this.intersection.push(key);
									this.intersection.push(key - 1);
									this.intersection.push(key + this.maxWidth);
									this.intersection.push(key + this.maxWidth - 1);
									return true;
								} else {
									return false;
								}
								break;
							case 4:
								var right = this.isAble(key + 1);
								var bottom = this.isAble(key + this.maxWidth);
								var rightBottom = this.isAble(key + this.maxWidth + 1);
								if (right && bottom && rightBottom) {
									this.$set(this.arr[key + 1], 3, true);
									this.$set(this.arr[key + this.maxWidth], 3, true);
									this.$set(this.arr[key + this.maxWidth + 1], 3, true);
									this.$set(this.arr[key], 3, true);
									this.intersection.push(key);
									this.intersection.push(key + 1);
									this.intersection.push(key + this.maxWidth);
									this.intersection.push(key + this.maxWidth + 1);
									return true;
								} else {
									return false;
								}
								break;
							default:
								return false;

						}
					},
					//2*2
					module5(x, y) {
						this.intersection = [];
						var key = this.valueKey(x, y)
						if (!this.isAble(key)) {
							return false
						}

						if (x == 0 && y == 0) { //左上角
							//右下
							return this.position(4, key);
						} else if (x == this.maxWidth - 1 && y == 0) { //右上角
							//左下
							return this.position(3, key);
						} else if (x == 0 && y == this.maxHeight - 1) { //左下角
							//右上
							return this.position(2, key);
						} else if (x == this.maxWidth - 1 && y == this.maxHeight - 1) { //右下角
							//左上
							return this.position(1, key);
						} else if (0 < x < this.maxWidth - 1 && y == 0) { //上边
							//右下左下
							var quadrant4 = this.position(4, key);

							if (!quadrant4) {
								return this.position(3, key);
							} else {
								return true
							}

						} else if (0 < x < this.maxWidth - 1 && y == this.maxHeight - 1) { //下边
							//右上左上
							var quadrant2 = this.position(2, key);
							if (!quadrant2) {
								return this.position(1, key);
							} else {
								return true
							}
						} else if (x == 0 && 0 < y < this.maxHeight - 1) { //左边
							//右下右上
							var quadrant4 = this.position(4, key);
							if (!quadrant4) {
								return this.position(2, key);
							} else {
								return true
							}
						} else if (x == this.maxWidth - 1 && 0 < y < this.maxHeight - 1) { //右边
							//左上左下
							var quadrant1 = this.position(1, key);
							if (!quadrant1) {
								return this.position(3, key);
							} else {
								return true
							}
						} else {
							//全判(中间部分)
							var quadrant4 = this.position(4, key);
							if (!quadrant4) {
								var quadrant3 = this.position(3, key);
								if (!quadrant3) {
									var quadrant2 = this.position(2, key);
									if (!quadrant2) {
										return this.position(1, key);
									} else {
										return true
									}
								} else {
									return true
								}
							} else {
								return true
							}
						}
					},
					postX(x) {
						var narr = [];
						this.arr.forEach(function(item, index) {
							if (item[0] == x && item[2] == true) {
								narr.push(item);
							}
						})
						return narr;
					},
					isAble(key) {
						return this.arr[key][2];
					},
					setAble(key, status) {
						this.arr[key][2] = status
					},
					isArrayFn(value) {
						if (typeof Array.isArray === "function") {
							return Array.isArray(value);
						} else {
							return Object.prototype.toString.call(value) === "[object Array]";
						}
					},
					sortNumber(a, b) {
						return a - b
					},
					distinct(arr) {
						if (this.isArrayFn(arr)) {
							let result = []
							let obj = {}

							for (let i of arr) {
								if (!obj[i]) {
									result.push(i)
									obj[i] = 1
								}
							}
							var res = result.sort(this.sortNumber);
							return res
						}
						return 'no array'
					},
					valueKey(x, y) {
						var x = Number(x);
						var y = Number(y);
						if (x == 0 && y == 0) {
							return 0
						} else if (x == 1 && y == 0) {
							return 1
						} else if (x == 2 && y == 0) {
							return 2
						} else if (x == 3 && y == 0) {
							return 3
						} else if (x == 4 && y == 0) {
							return 4
						} else if (x == 5 && y == 0) {
							return 5
						} else if (x == 0 && y == 1) {
							return 6
						} else if (x == 1 && y == 1) {
							return 7
						} else if (x == 2 && y == 1) {
							return 8
						} else if (x == 3 && y == 1) {
							return 9
						} else if (x == 4 && y == 1) {
							return 10
						} else if (x == 5 && y == 1) {
							return 11
						} else if (x == 0 && y == 2) {
							return 12
						} else if (x == 1 && y == 2) {
							return 13
						} else if (x == 2 && y == 2) {
							return 14
						} else if (x == 3 && y == 2) {
							return 15
						} else if (x == 4 && y == 2) {
							return 16
						} else if (x == 5 && y == 2) {
							return 17
						} else if (x == 0 && y == 3) {
							return 18
						} else if (x == 1 && y == 3) {
							return 19
						} else if (x == 2 && y == 3) {
							return 20
						} else if (x == 3 && y == 3) {
							return 21
						} else if (x == 4 && y == 3) {
							return 22
						} else if (x == 5 && y == 3) {
							return 23
						} else {
							return 0
						}
					}
				}
			})
			layui.use(['form'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				var laoding = "";
				//监听提交
				form.on('submit(formDemo)', function(obj) {
					var l = app.$data.arr;
					var nl = check_length(l);
					if (!nl) {
						var shareContent = app.$refs.showImg;
						domtoimage.toPng(shareContent, {
							bgcolor: '#00b6ff'
						}).then(function(dataUrl) {
							var data = {
								title: obj.field.title,
								describe: obj.field.describe,
								id: obj.field.id,
								sort: obj.field.sort,
								image: dataUrl,
								template_code: app.$data.imgBox
							}
							var index = parent.layer.getFrameIndex(window.name);
							var lfc = top.layerFrameConfig;
							var info = lfc.iframeB.info;
							laoding = layer.load(1);
							$.post("{:url('edit')}", data, function(res) {
								if (res.status == 1) {
									layer.msg('修改成功', {
										icon: 1,
										time: 300
									}, function() {
										layer.close(laoding);
										parent.layer.close(index); //再执行关闭
										info.reload()
									});

								} else {
									layer.close(laoding);
									layer.msg(res.message)
								}
							})

						}).catch(function(error) {
							console.error('oops, something went wrong!', error);
						});

					}

					return false;
				})
				$("#close").click(function() {
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				})

				function check_length(data) {
					var len = 0;
					data.forEach(function(item, index) {
						if (item[2]) {
							len++;
						}
					})
					return len;
				}
			})
		})
	</script>
</html>
